<template>
  <el-card>
    <div class="white-body-view">
      <el-button type="primary"
                 icon="el-icon-circle-plus-outline"
                 style="width:100%"
                 @click="addNewRecord()">添加一级菜单</el-button>
      <custom-tree ref="customTree"
                   :tree-data="treeData"
                   :tree-expand-all="treeExpandAll"
                   :tree-node-key="treeNodeKey"
                   @addItem="addTreeItem"
                   @deleteItem="deleteTreeItem"
                   @editItem="editTreeItem" />
      <!-- 地点弹窗 -->
      <place-dialog ref="placeDialog"
                    @addData="addData"
                    @editData="editData" />
    </div>
  </el-card>
</template>
<script>
import CustomTree from '../../../components/Tree'
import PlaceDialog from '../../../components/PlaceDialog'
export default {
  components: {
    CustomTree,
    PlaceDialog
  },

  data () {
    return {
      treeData: [],
      treeExpandAll: true,
      treeNodeKey: 'id'
    }
  },

  created () {
    this.initTreeData()
  },

  methods: {
    // 初始化列表
    initTreeData () {
      this.treeData = [
        {
          children: [
            {
              children: [
                {
                  children: [],
                  name: '系统菜单管理',
                  desc: '进行菜单栏管理',
                  parentId: '1',
                  id: '2',
                  url: "system/role/systemMenuManagement",
                  rank: "1",
                  parentId: "3",
                },
                {
                  children: [],
                  name: '角色设置',
                  desc: '增删改新角色以及给角色分配权限',
                  parentId: '1',
                  id: '3',
                  url: "system/role/systemMenuManagement",
                  rank: "1",
                  parentId: "3",
                },
                {
                  children: [],
                  name: '用户角色分配',
                  desc: '给用户分配角色',
                  parentId: '1',
                  id: '4',
                  url: "system/role/systemMenuManagement",
                  rank: "1",
                  parentId: "3",
                }

              ],
              name: '账号角色设置',
              desc: '进行菜单栏管理',
              parentId: '1',
              id: '11',
              url: "system/role/systemMenuManagement",
              rank: "1",
              parentId: "1",
            },
            {
              children: [],
              name: '打印模版设置',
              desc: '打印模版相关设置',
              parentId: '1',
              id: '12',
              url: "system/role/systemMenuManagement",
              rank: "1",
              parentId: "1",
            },
            {
              children: [],
              name: '数据备份升级',
              desc: '系统数据的备份和升级',
              parentId: '1',
              id: '13',
              url: "system/role/systemMenuManagement",
              rank: "1",
              parentId: "1",
            }
          ],
          name: '系统参数',
          parentId: '',
          id: '1',
          url: "system/role/systemMenuManagement",
          rank: "2",
        },
        {
          children: [
            {
              children: [],
              name: '街道办信息',
              desc: '街道办相关',
              parentId: '5',
              id: '21',
              url: "system/role/systemMenuManagement",
              rank: "2",
              parentId: "2",
            },
            {
              children: [],
              name: '社区列表',
              desc: '社区相关',
              parentId: '5',
              id: '22',
              url: "system/role/systemMenuManagement",
              rank: "2",
              parentId: "2",
            },
            {
              children: [],
              name: '区域列表',
              desc: '区域相关',
              parentId: '5',
              id: '23',
              url: "system/role/systemMenuManagement",
              rank: "2",
              parentId: "2",
            },
          ],
          name: '基础数据',
          parentId: '',
          id: '2',
          url: "system/role/systemMenuManagement",
          rank: "2",
        }
      ]
    },

    // 添加新记录
    addNewRecord () {
      this.$refs.placeDialog.openDialog(false)
    },

    // 新增表单数据
    addData (data) {
      // 新增树节点
      this.$refs.customTree.treeAddItem(data)
    },

    // 修改表单数据
    editData (data) {
      // 修改树节点
      this.$refs.customTree.treeEditItem(data)
    },

    // 增加树节点
    addTreeItem (data) {
      // 打开地点弹窗，设置默认父级节点
      this.$refs.placeDialog.openDialog(false, data.id)
    },

    // 删除树节点
    deleteTreeItem (data) {
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除树节点
        this.$refs.customTree.treeDeleteItem(data)
        // 提示
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 修改树节点
    editTreeItem (data) {
      // 打开地点编辑弹窗
      this.$refs.placeDialog.openDialog(true, data.parentId, data)
    }

  }
}
</script>
<style scoped>
.button {
  margin-bottom: 10px !important;
}
</style>